<template>
  <el-container class="app-home-page">
    <!-- 左边区别 -->
    <AsideComp></AsideComp>
    <el-container class="is-vertical">
      <!-- 头部 -->
      <HeaderComp></HeaderComp>
      <!--  中间内容区域 -->
      <MainComp></MainComp>
    </el-container>
  </el-container>
</template>

<script>
// 引入边组件模块
import AsideComp from "@/components/HomComp/AsideComp.vue";
import HeaderComp from "@/components/HomComp/HeaderComp.vue";
import MainComp from "@/components/HomComp/MainComp.vue";

export default {
  data() {
    return {};
  },
  components: {
    AsideComp,
    HeaderComp,
    MainComp,
  },
};
</script>

<style lang="scss" scoped>
// .app-home-page {
//   .home-page-aside {
//     .el-scrollbar {
//       border-right: 1px solid #2323;
//     }
//   }
// }

.app-home-page .el-main {
  padding: 0;
}
.app-home-page .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
